<section id="widget-grid" class="">
	<!-- row -->
	<div class="row" id="allTaskBox">
		<!-- NEW WIDGET START -->
			<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<!-- Widget ID (each widget will need unique ID)-->
				<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-sortable="true" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false">
					<header>
						<span class="widget-icon"> <i class="fa fa-table"></i> </span>
						<h2> 干线任务管理 </h2>
					</header>
					<!-- widget div-->
					<div role="content">
						<!-- widget edit box -->
						<div class="jarviswidget-editbox">
							<!-- This area used as dropdown edit box -->
						</div>
						<!-- end widget edit box -->
						<!-- widget content -->
						<div class="widget-body no-padding" style="overflow:hidden">
							<!-- 任务状态浮动 -->
							<div id="chat-container" class="open">
								<span class="chat-list-open-close"><i class="fa fa-tasks"></i><b>!</b></span>
								
								<div class="panel panel-primary no-margin" id="taskPanel">
							        <div class="panel-heading">
										<a href="javascript:void(0);" class="panel-title"><strong>任务(2345)</strong></a>
										<!-- <span class="taskPanelCon" style="display:block">
											<a id="toggleTaskBtn" class="btn btn-xs btn-default" title="收起" href="javascript:ShowTaskMenu();"><span class="glyphicon glyphicon-pushpin"></span></a>
										</span> -->
							        </div>
									<ul class="list-group no-margin">
										<li class="list-group-item">
											<a href="javascript:void(0);"><i class="fa fa-caret-right "></i> 未指派(8)</a>
										</li>
										<li class="list-group-item">
											<a href="javascript:void(0);"><i class="fa fa-caret-right "></i> 未下发(8)</a>
										</li>
										<li class="list-group-item">
											<a href="javascript:void(0);"><i class="fa fa-caret-right "></i> 未确认(5)</a>
										</li>
										<li class="list-group-item">
											<a href="javascript:void(0);"><i class="fa fa-caret-right "></i> 已确认(4)</a>
										</li>
										<li class="list-group-item">
											<a href="javascript:void(0);"><i class="fa fa-caret-right "></i> 已开始(11)</a>
										</li>
										<li class="list-group-item">
											<a href="javascript:void(0);"><i class="fa fa-caret-right "></i> 已到达(3)</a>
										</li>
										<li class="list-group-item">
											<a href="javascript:showLastTaskMenu();" id="btnToggleCom" style="margin-left:-3px"><i class="fa fa-minus-circle "></i></a>
											<a href="javascript:void(0);"> 完成(5)</a>
											<dl style="margin:0;padding:3px 0 0 10px;">
												<dd><a href="javascript:void(0);"> 完成（2）</a></dd>
												<dd><a href="javascript:void(0);"> 改期（2）</a></dd>
												<dd><a href="javascript:void(0);"> 取消（1）</a></dd>
											</dl>
										</li>
									</ul>
								</div>
							</div>
							<!-- 任务状态浮动结束 -->
							<!-- 自定义搜索区 -->
							<div class="widget-body-toolbar" style="height:70px;overflow:hidden;">
								<form role="form" class="smart-form">
									<div class="pull-left global-search-box">
										
											<section class="pull-left no-padding col pull-width200" >
												<label class="">任务时间</label>
												<label class="input">
												<i class="icon-prepend fa fa-calendar"></i>
													<input type="text" value="2014-09-22 - 2014-09-24" class="input-sm" id="reservation" maxlength="10">
												</label>
	                                        </section>
											<section class="pull-left no-padding col pull-width120" >
												<label class="">任务号</label>
												<label class="input">
													<input type="text" name="tid" placeholder="" class="input-sm">
												</label>
											</section>
											<section class="pull-left no-padding col pull-width120" >
												<label class="">运单号</label>
												<label class="input">
													<input type="text" name="tid" placeholder="" class="input-sm">
												</label>
											</section>
											<section class="pull-left no-padding col pull-width180" >
												<label class="">所属机构</label>
												<label class="input">
													<input type="text" value="杭州分拨" class="input-sm" id="reservation2" maxlength="10">
												</label>
	                                        </section>
	                                        <section class="pull-left no-padding col pull-width120" >
												<label class="">车牌号</label>
												<label class="input">
													<input type="text" value="" class="input-sm" id="" maxlength="10">
												</label>
	                                        </section>
											
											
										<div class="global-search-btn" >
											<a class="btn btn-primary  btn-sm" type="button" id="searchOrder">搜索</a>
											<a id="more_search" class="btn btn-sm btn-link" type="button">更多条件</a>
								  		</div>
									</div>
									
								</form>
							</div>
							
						  <div class="row no-margin margin-top-10 margin-bottom-10" >
								<div class="col-xs-8 col-sm-8">
									<div class="btn-group">
										<!-- <a class="btn btn-default" href="#">导入</a> -->
	                                    <a id="export" class="btn btn-default" href="javascript:void(0);">导出</a>
									</div>
									<div class="btn-group">
										<a onclick="appoint()" href="javascript:void(0);" class="btn btn-default btn-must-one">指派</a>
										<a onclick="" href="javascript:void(0);" class="btn btn-default btn-must-one">下发</a>
									</div>
	                                <div class="btn-group">
										<a onclick="" class="btn btn-default btn-must-one" href="javascript:void(0);">取消</a>
										<a onclick="" class="btn btn-default btn-must-one" href="javascript:void(0);">改期</a>
									</div>
	                                <div class="btn-group">
										<a onclick="changetaskstatus()" class="btn btn-default btn-only-one" href="javascript:void(0);">变更状态</a>
										<a onclick="backtaskstatus()" class="btn btn-default btn-only-one" href="javascript:void(0);">状态回退</a>
	                                </div>
								</div>
								
							</div>
							<table id="dt_basic" class="table table-striped table-bordered table-hover has-tickbox">
								<thead>
									<tr role="row">
										<th>
											<label class="no-margin">
												<input type="checkbox" class="checkbox style-0">
												<span> </span>
											</label>
										</th>
										<th>操作</th>
										<th>线路名称</th>
										<th>运送车辆</th>
										<th>状态</th>
										<th>任务时间</th>
										<th >标准任务发车时间</th>
										<th>延误类型</th>
										<th>延误原因</th>
										<th>任务号</th>
										<th>运单号</th>
										<th>承运商</th>
										<th>商品数量</th>
										<th>计划任务</th>
									</tr>
								</thead>
								<tbody>
	                            	<tr>
	                            		<td>
	                            			<label class="no-margin">
												<input type="checkbox" class="checkbox style-0">
												<span> </span>
											</label>
	                            		</td>
	                            		<td>
		                            		<div class="btn-group">
	                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                                             	<i class="fa fa-pencil"></i>
	                                                <i class="fa fa-caret-down"></i>
	                                            </button>
	                                            <ul class="dropdown-menu">
	                                                <li>
	                                                    <a href="javascript:void(0);">指派</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">下发</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">取消</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">改期</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">变更状态</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">状态回退</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">定位</a>
	                                                </li>
	                                            </ul>
	                                        </div>
                                        </td>
	                            		<td>Ane_suzhou_苏州-昆山-北京</td>
	                            		<td>京AF6041</td>
	                            		<td><div class="status_log"><a id="" class="label label-warning grid_status1" href="javascript:void(0);" title="">未下发</a></div></td>
	                            		<td>2014-09-24</td>
	                            		<td>2014-09-24 00:59:00</td>
	                            		<td></td>
	                            		<td></td>
	                            		<td>201409101419I8FO</td>
	                            		<td>201409101419I8FO</td>
	                            		<td>苏州分拨</td>
	                            		<td></td>
	                            		<td></td>
	                            	</tr>
									<tr>
	                            		<td>
	                            			<label class="no-margin">
												<input type="checkbox" class="checkbox style-0">
												<span> </span>
											</label>
	                            		</td>
	                            		<td>
		                            		<div class="btn-group">
	                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                                             	<i class="fa fa-pencil"></i>
	                                                <i class="fa fa-caret-down"></i>
	                                            </button>
	                                            <ul class="dropdown-menu">
	                                                <li>
	                                                    <a href="javascript:void(0);">指派</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">下发</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">取消</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">改期</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">变更状态</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">状态回退</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">定位</a>
	                                                </li>
	                                            </ul>
	                                        </div>
                                        </td>
	                            		<td>Ane_suzhou_苏州-广州</td>
	                            		<td></td>
	                            		<td><div class="status_log"><a id="" class="label label-default" href="javascript:void(0);" title="">未指派</a></div></td>
	                            		<td>2014-09-24</td>
	                            		<td>2014-09-24 23:00:00</td>
	                            		<td></td>
	                            		<td></td>
	                            		<td>201409101419I8FO</td>
	                            		<td>201409101419I8FO</td>
	                            		<td>苏州分拨</td>
	                            		<td></td>
	                            		<td></td>
	                            	</tr>
	                            	<tr>
	                            		<td>
	                            			<label class="no-margin">
												<input type="checkbox" class="checkbox style-0">
												<span> </span>
											</label>
	                            		</td>
	                            		<td>
		                            		<div class="btn-group">
	                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                                             	<i class="fa fa-pencil"></i>
	                                                <i class="fa fa-caret-down"></i>
	                                            </button>
	                                            <ul class="dropdown-menu">
	                                                <li>
	                                                    <a href="javascript:void(0);">指派</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">下发</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">取消</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">改期</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">变更状态</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">状态回退</a>
	                                                </li>
	                                                <li>
	                                                    <a href="javascript:void(0);">定位</a>
	                                                </li>
	                                            </ul>
	                                        </div>
                                        </td>
	                            		<td>Ane_suzhou_苏州-成都</td>
	                            		<td>苏B04956</td>
	                            		<td><div class="status_log"><a id="" class="label label-success" href="javascript:void(0);" title="">已完成</a></div></td>
	                            		<td>2014-09-23</td>
	                            		<td>2014-09-23 22:00:00</td>
	                            		<td>交通原因</td>
	                            		<td><a href="#">高速堵车2小时</a> <a href="#"><i class="fa fa-fw fa-camera txt-color-blueLight"></i></a></td>
	                            		<td>201409101419I8FO</td>
	                            		<td>201409101419I8FO</td>
	                            		<td>苏州分拨</td>
	                            		<td></td>
	                            		<td>B0984057C817175264A8F38BBEBBF0A6</td>
	                            	</tr>                         	
								</tbody>
							</table>
						</div>
						<!-- end widget content -->

					</div>
					<!-- end widget div -->

				</div>
				<!-- end widget -->
			</article>
			
		<!-- WIDGET END -->

	</div>

	<!-- end row -->

	<!-- end row -->

</section>
<!-- Modal LBS跟踪 -->
<div class="modal fade" id="viewLbs"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">干线任务指派</h4>
			</div>
			<div class="modal-body no-padding" >
				<form id="appointForm" role="form" class=" smart-form">	
					<fieldset class="no-padding">
						<section class="col-xs-12">
							<div class="row">
								<label class="label col col-3 text-align-right">任务号：</label>
								<div class="col col-8 no-padding">
									<label class="textarea">
										<textarea placeholder="Textarea" rows="3" readonly="" name="taskcodes" id="taskcodes">201409231451WX5J</textarea>
									</label>
								</div>
							</div>  
						</section>
						
						<section class="col-xs-12">
							<div class="row">
								<label class="label col col-3 text-align-right">投递员：</label>
								<label class="col col-3 no-padding input">
									<input type="text" class="input-sm" style="width:100%"  name="tid" placeholder="投递员姓名" value=""  id="e5">
								</label>
								<label class="label col col-2 text-align-right" for="datatype">车号：</label>
								<label class="input col col-3 no-padding">
									<input type="text" class="input-sm" style="width:100%"  name="tid" placeholder="请选派车辆" value=""  id="e6">
								</label>
							</div>
						</section>
						<section class="col-xs-12">
							<div class="row">
								<label class="label col col-3 text-align-right" for="datatype">班线：</label>
								<label class="select col col-8 no-padding">
									<input type="text" class="input-sm" style="width:100%"  name="tid" placeholder="苏州-广州" value=""  id="e7" disabled="disabled">
								</label>
							</div>
						</section>
						<section class="col-xs-12">
							<div class="row">
								<label class="label col col-3 text-align-right" for="datatype">发车时间：</label>
								<div class="col col-8 no-padding">
									<label class="input state-disabled">
										<i class="icon-prepend fa fa-calendar"></i>
										<input type="text" class="input-sm" placeholder="请选择一个时间点" name="trunktime" id="trunktime" value="2014-09-24 23:00">
									</label>
								</div>
							</div>
						</section>
						<section class="col-xs-12">
							<div class="row">
								<label class="label col col-3 text-align-right" for="datatype">发车计划：</label>
								<label class="select col col-8 no-padding">
									<input type="text" class="input-sm" style="width:100%"  name="tid" placeholder="发车计划名称" value=""  id="e8" >
								</label>
							</div>
						</section>
					</fieldset>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="sure">
					<i class="fa fa-save"></i>
					确认
				</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">
					取消
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- end widget grid -->
<script src="js/plugin/date/moment.js"></script>
<script src="js/plugin/date/daterangepicker.js"></script>
<script src="../js/plugin/jquery-blockui/jquery.blockUI.js"></script>

<script type="text/javascript">

	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();

	// 更多搜索条件按钮!
	$("#more_search").attr("state","close");			
	$("#more_search").click(function(){
		if ($("#more_search").attr("state") == "close"){
			$(".widget-body-toolbar").css("height","auto");	
			$("#more_search").text("收起条件");
			$("#more_search").attr("state","open");
		}
		else {
			$(".widget-body-toolbar").css("height","70");	
			$("#more_search").text("更多条件");
			$("#more_search").attr("state","close");			
			}
	});

	// PAGE RELATED SCRIPTS

	loadDataTableScripts();
	function loadDataTableScripts() {

		loadScript("js/plugin/datatables/jquery.dataTables-cust.min.js", dt_2);

		function dt_2() {
			loadScript("js/plugin/datatables/ColReorder.min.js", dt_3);
		}

		function dt_3() {
			loadScript("js/plugin/datatables/FixedColumns.min.js", dt_4);
		}

		function dt_4() {
			loadScript("js/plugin/datatables/ColVis.min.js", dt_5);
		}

		function dt_5() {
			loadScript("js/plugin/datatables/ZeroClipboard.js", dt_6);
		}

		function dt_6() {
			loadScript("js/plugin/datatables/media/js/TableTools.min.js", dt_7);
		}

		function dt_7() {
			loadScript("js/plugin/datatables/DT_bootstrap.js", runDataTables);
		}

	}

	function runDataTables() {

		/*
		 * BASIC
		 */
		var oTable = $('#dt_basic').dataTable({
			//"sDom" : "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-4'i><'col-sm-8 text-right'p>>",
			//"sDom" : '<"dt-row dt-bottom-row"flipt>',
			"sPaginationType" : "bootstrap_full",
			"bFilter": false,
			"bAutoWidth": false,
			"aaSorting": [[ 3, "desc" ]],
			"aoColumns": [
			{ "bSortable": false ,"sWidth":"30px"},
			null,
			null,
			null,
			null,
			null,
			null,
			null,
			null,
			null,
			null,
			null,
			null,
			null
			],
			//"sScrollX": "110%",
			//"bPaginate": false, //取消翻页显示
			//"bInfo": true,//页脚信息
			//"bScrollAutoCss": true,
			// "sScrollY": "300px",
			// "bScrollInfinite": true,
			//"bScrollCollapse": true,
			// "iScrollLoadGap": 30,
			//"sScrollY": "200px",
			//"bPaginate": false,
			//"bRetrieve": true,
			"oLanguage": {
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "前一页",
			"sNext": "后一页",
			"sLast": "尾页"
			},
			"sZeroRecords": "没有检索到数据",
			"sProcessing": "<img src='./loading.gif' />"
			},
			"fnDrawCallback": function( oSettings ) {
     			$(oSettings.nTable).css('width','100%');
     			$(oSettings.nTable).find("th,td").css('white-space', 'nowrap');
     			$(oSettings.nTable).find('tbody tr.even').css('backgroundColor', '#FFF');
     			$(oSettings.nTable).find(".btn-group").slice(-5).addClass('dropup');
                $(oSettings.nTable).find(".btn-group").slice(0,3).removeClass('dropup');
                $(oSettings.nTable).parent(".dt-wrapper").css({
                    'overflow': 'auto',
                    'min-height': '300px',
                    'background': '#f9f9f9'
                });
                $(oSettings.nTable).find("th label input,td label input").next("span").css('margin-right', '0');
                L = $(oSettings.nTable).find("tr").length;
                if(L < 6){
                    $(oSettings.nTable).find("tr:last td").css({
                        "border": '1px solid #DDDDDD'
                    });                 
                };
                var chk = $(oSettings.nTable).find(".checkAll");
                chk.click(function(event) {
                    if ($(this).prop('checked')) {
                        $(this).parents("table").find('tbody td input.checkbox').prop('checked', true)
                        $(this).siblings("span").removeClass('someone');
                    } else {
                        $(this).parents("table").find('tbody td input.checkbox').prop('checked', false)
                    };
                });
                $(oSettings.nTable).find("td input.checkbox").click(function(event) {
                    if (!$(this).prop('checked')) {
                        chk.siblings("span").addClass('someone');
                    };
                    checkStateAll = true;
                    checkStateOne = false;
                    $("tbody td input.checkbox").each(function(index, el) {
                        checkStateAll = checkStateAll && $(this).prop('checked');
                        checkStateOne = checkStateOne || $(this).prop('checked');
                    });
                    if (checkStateAll) {
                        checkStateOne = false;                      
                        chk.prop('checked', true)
                        chk.siblings("span").removeClass('someone');                     
                    }
                    if (checkStateOne) {
                        chk.prop('checked', true)
                        chk.siblings("span").addClass('someone');
                    }                   
                    if (checkStateAll === checkStateOne) {
                        chk.prop('checked', false)
                        chk.siblings("span").removeClass('someone');                         
                    }
                });
 			}

		});

		/* END BASIC */


	}	

	$(function() {
	    /* 浮动菜单的显示和隐藏 */
		$.chat_list_btn = $('#chat-container > .chat-list-open-close');
		$.chat_list_btn.click(function () {
		    var taskMenu = $(this).parent('#chat-container');
		    taskMenu.toggleClass('open');
		})
		setTimeout("hideTaskMenu()", 3000);

	    $('#reservation').daterangepicker({
			singleDatePicker: true, //必须要有默input 认value
			timePicker: false,		//是否启用时间选择
			//timePickerIncrement:10,	//分钟选择的间隔
			format: 'YYYY-MM-DD',	//返回值的格式
			timePicker12Hour: false,	//采用24小时计时制
			showDropdowns: true,		//是否显示年、月下拉框
		});

		$("#e5").select2({  //自动完成
		    placeholder: "快速查找",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'大禹车队'},{id:1,text:'圣嘉物流'},{id:2,text:'石桥物流'},{id:3,text:'中南运输'},{id:4,text:'广丰物流'}]
		});
		$("#e6").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});
		$("#e7").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: false,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});
		$("#e8").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: false,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});
	});
	function hideTaskMenu(){
		$('#chat-container').removeClass('open');
	}

	function showLastTaskMenu(){
		$("#btnToggleCom").next().next("dl").toggle();
		$("#btnToggleCom").children("i").toggleClass("fa-minus-circle fa-plus-circle");
	}

	function appoint(){
		$('#viewLbs').modal();
	}
	//合作时间
</script>
